<template>
	<view class="pb40">
		<u-navbar :title="title" :is-back="false"></u-navbar>
		<image src="../../static/toubu.png" mode="widthFix" class="wd100"
			style="box-shadow:0rpx 6rpx 10rpx -8rpx #666;"></image>
		<view class=" dis-flex flex-align-center flex-center c-fff">
			<image src="../../static/titel2.png" mode="" style="width: 100%;height: 140rpx;"></image>
			<view class="pos-abs center">服务项目</view>
		</view>
		<view class="pl15 pr15 dis-flex flex-between fs14">
			<view @click="gaibian(index,item)" :class="{'tab': index==tab}" v-for="(item,index) in data"
				class="br5 bg-f8f center ellipsis fs12" style="width: 160rpx; height: 80rpx;line-height: 80rpx; ">
				{{item.name}}
			</view>
		</view>
		<view class="pt10 pl15 pr15 pb15 pos-rel " style="box-shadow:0rpx 6rpx 10rpx -8rpx #666;">
			<view class="" id="blue" v-if="tab == 0" style="left:60rpx"></view>
			<view class="" id="blue" v-if="tab == 1" style="left:240rpx"></view>
			<view class="" id="blue" v-if="tab == 2" style="left:420rpx"></view>
			<view class="" id="blue" v-if="tab == 3" style="left:590rpx"></view>
			<view v-if="tab == index" v-for="(item,index) in data" class="br5 center fw600  fs12  p10 dis-flex flex-align-center"
				style="border: 2rpx solid #333;height: 160rpx;color: #1d336f;letter-spacing:2rpx;">
				{{item.content}}</view>
		</view>
		<view class="pt15 pl15 pr15">
			<view class="br5 center c-fff"
				style="width: 200rpx;height: 70rpx;line-height: 70rpx;background-color: #1d336f;box-shadow:4rpx 6rpx 10rpx -8rpx #666;">
				联系方式
			</view>
			<view class="fw600 mt10">
				您的姓名：
			</view>
			<u-input v-model="name" type="text" :border="true" border-color="#333" placeholder="请输入您的姓名" />
			<view class="fw600 mt10">
				联系电话：
			</view>
			<u-input v-model="phone" type="number" :border="true" border-color="#333" placeholder="请输入您的电话" />
			<view class="fw600 mt10">
				检测时间：
			</view>
			<u-input @click="gotime" v-model="time" type="text" :disabled="true" :border="true" border-color="#333"
				placeholder="请选择您检测预约时间" />
			<view class="fw600 mt10">
				检测地点：
			</view>
			<u-input @click="godidian" v-model="didian" type="text" :disabled="true" :border="true" border-color="#333"
				placeholder="请输入您的检测地点" />
			<view class="fw600 mt10">
				检测车型：
			</view>
			<u-input @click="gochexing" v-model="chexing" type="text" :disabled="true" :border="true"
				border-color="#333" placeholder="请输入您的检测车型" />
		</view>
		<view class="dis-flex flex-center mt20 pb15" style="box-shadow:4rpx 6rpx 10rpx -8rpx #666;">
			<view class="fw600 dis-flex flex-align-center">
				费用：
				<u-input v-model="money" type="text" :disabled="true" placeholder="" :border="true" border-color="#333"
					:custom-style="{width:'150rpx'}" />
			</view>
		</view>
		<view class="dis-flex flex-center mt20">
			<view @click="tiaozhuan" class="center fw600 fs16 c-fff br5"
				style="width: 220rpx;height: 70rpx;line-height: 70rpx;background-color: #00aeff;box-shadow:4rpx 6rpx 10rpx -8rpx #666;">
				确定
			</view>
		</view>
		<u-calendar v-model="time_show" mode="date" @change="change" :min-date="min_time" max-date="3000-01-01">
		</u-calendar>
		<u-select v-model="didian_show" mode="mutil-column-auto" :default-value="didian_moren" :list="didian_list"
			@confirm="didian_confirm"></u-select>
		<!-- <u-select v-model="chexing_show" mode="mutil-column-auto" :default-value="chexing_moren" :list="chexing_list"
			@confirm="chexing_confirm"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				phone: '',
				time: '',
				didian: '',
				chexing: '',
				money: '0.00',
				title: '一检验车',
				data: [],
				tab: 0,
				min_time: '', //当前时间
				didian_show: false,
				didian_list: [],
				chexing_show: false,
				chexing_list: [],
				time_show: false,
				didian_id: '', //地点id
				didian_moren: [],
				chexing_id: '', //车型id
				chexing_moren: [],
				lei_id: '', //分类ID
				province: '', //省
				city: '', //市
				county: '', //区
				brand: '', //汽车品牌
				model: '', //车型名称

			}
		},
		watch: {

			lei_id() {
				this.jisuan()
			},
			didian_id() {
				this.jisuan()
			},
			chexing_id() {
				this.jisuan()
			},
			name(){this.huancun()},
			phone(){this.huancun()},
			time(){this.huancun()},
			didian_moren(){this.huancun()},
			chexing_moren(){this.huancun()},
		},
		onShow() {
			this.init()
			//打开分享
			uni.showShareMenu()
			var shuju = uni.getStorageSync('shuju')
			if (shuju) {
				this.name = shuju.name //名字
				this.phone = shuju.phone //手机号
				this.time = shuju.time //时间
				this.lei_id = shuju.lei_id //类目ID	
				this.didian_id = shuju.didian_id //地址id
				// this.chexing_id = shuju.chexing_id //车型id
				this.province = shuju.province //省
				this.city = shuju.city //市
				this.county = shuju.county //区
				// this.brand = shuju.brand //汽车品牌
				// this.model = shuju.model //车型名称
				this.didian_moren = JSON.parse(JSON.stringify(shuju.didian_moren))
				// this.chexing_moren = JSON.parse(JSON.stringify(shuju.chexing_moren))
				this.didian = shuju.didian
				
				
			}
			var brand = uni.getStorageSync('brand')
			var model = uni.getStorageSync('model')
			var chexing_id = uni.getStorageSync('chexing_id')
			if(brand){
				this.chexing = brand 
				this.brand = brand
			}
			if(chexing_id){
				this.chexing_id = chexing_id
			}
			if(model){
				this.chexing = this.brand + "-" + model
				this.model = model
			}
			
			let yy = new Date().getFullYear()
			let mm = new Date().getMonth() + 1
			let dd = new Date().getDate()
			this.min_time = yy + '-' + mm + '-' + dd
			this.time = this.min_time
		},
		methods: {
			init() {
				//获取4个分类
				this.$http.post(this.$config.UrlPostserviceList, {}).then((res) => {
					if (res.status == 1) {
						this.data = res.data
						this.lei_id = res.data[0].id //默认第一个ID
					}
				})
				//获取监测地点
				this.$http.post(this.$config.UrlPostprovinceList, {}).then((res) => {
					if (res.status == 1) {
						this.didian_list = res.data
					}
				})
				//获取车型
				this.$http.post(this.$config.UrlPostcarList, {}).then((res) => {
					if (res.status == 1) {
						this.chexing_list = res.data
					}

				})
			},
			//计算费用
			jisuan() {
				if (this.lei_id && this.didian_id && this.chexing_id) {
					var json = {
						sid: this.lei_id,
						cityid: this.didian_id,
						carid: this.chexing_id
					}
					this.$http.post(this.$config.UrlPostcheckPrice, json).then((res) => {
						if (res.status == 1) {
							this.money = res.data
						}
					})
				}

			},
			didian_confirm(e) {

				var didian = ''
				var moren = []
				var xiabiao = 0
				var xiabiao2 = 0
				for (let i = 0; i < e.length; i++) {
					if (didian != e[i].label) {
						didian += e[i].label
					}
					if (i == 0) {
						this.province = e[i].label
						for (let k = 0; k < this.didian_list.length; k++) {
							if (e[i].label == this.didian_list[k]['label']) {
								moren.push(k)
								xiabiao = k
							}
						}
					}
					if (i == 1) {
						this.city = e[i].label
						var erji = this.didian_list[xiabiao].children
						for (let k = 0; k < erji.length; k++) {
							if (e[i].label == erji[k]['label']) {
								moren.push(k)
								xiabiao2 = k
							}
						}
					}
					if (i == 2) {
						this.county = e[i].label
						var sanji = this.didian_list[xiabiao].children[xiabiao2].children
						for (let k = 0; k < sanji.length; k++) {
							if (e[i].label == sanji[k]['label']) {
								moren.push(k)
							}
						}
					}

					this.didian_id = e[i].value
				}
				this.didian_moren = moren
				this.didian = didian
			},
			// chexing_confirm(e) {
			// 	var chexing = ''
			// 	var heng = '-'
			// 	var moren = []
			// 	var xiabiao = 0
			// 	for (let i = 0; i < e.length; i++) {
			// 		if (chexing != e[i].label) {
			// 			if(i>0){heng=""}
			// 			chexing += e[i].label + heng
			// 		}
			// 		if (i == 0) {
			// 			this.brand = e[i].label
			// 			for (let k = 0; k < this.chexing_list.length; k++) {
			// 				if (e[i].label == this.chexing_list[k]['label']) {
			// 					moren.push(k)
			// 					xiabiao = k
			// 				}
			// 			}
			// 		}
			// 		if (i == 1) {
			// 			this.model = e[i].label
			// 			var erji = this.chexing_list[xiabiao].children
			// 			for (let k = 0; k < erji.length; k++) {
			// 				if (e[i].label == erji[k]['label']) {
			// 					moren.push(k)
			// 				}
			// 			}
			// 		}
			// 		this.chexing_id = e[i].value
			// 	}
			// 	this.chexing_moren = moren
			// 	this.chexing = chexing
			// },

			change(e) {
				this.time = e.result
			},
			gaibian(index, item) {
				this.tab = index
				this.lei_id = item.id
			},
			godidian() {
				this.didian_show = !this.didian_show
			},
			gochexing() {
				// this.chexing_show = !this.chexing_show
				this.$api.openWindow("/pages/brand/brand")
			},
			//确定
			tiaozhuan() {
				if (this.name && this.phone && this.time && this.lei_id && this.didian_id) {
					var json = {
						uid: uni.getStorageSync('uid'),
						name: this.name, //名字
						phone: this.phone, //手机号
						time: this.time, //时间
						sid: this.lei_id, //类目ID	
						county_id: this.didian_id, //地址id
						model_id: this.chexing_id, //车型id
						province: this.province, //省
						city: this.city, //市
						county: this.county, //区
						brand: this.brand, //汽车品牌
						model: this.model, //车型名称
						money: this.money
					}
					json = encodeURIComponent(JSON.stringify(json))
					this.$api.openWindow('/pages/pay/pay?data='+json)
				} else {
					this.$api.toast('请完善信息')
				}
			},
			gotime() {
				this.time_show = !this.time_show
			},
			huancun(){
				//加入缓存
				var cath = {
					name: this.name, //名字
					phone: this.phone, //手机号
					time: this.time, //时间
					lei_id: this.lei_id, //类目ID	
					didian_id: this.didian_id, //地址id
					chexing_id: this.chexing_id, //车型id
					province: this.province, //省
					city: this.city, //市
					county: this.county, //区
					brand: this.brand, //汽车品牌
					model: this.model, //车型名称
					didian_moren: this.didian_moren,
					chexing_moren: this.chexing_moren,
					didian: this.didian,
					chexing: this.chexing
				}
				uni.setStorageSync('shuju', cath)
			}
			
		}
	}
</script>

<style>
	page {
		background: #ffffff;
		color: #333333;
	}

	.tab {
		color: #FFFFFF !important;
		background-color: #1d336f !important;
		box-shadow: 4rpx 6rpx 10rpx -8rpx #666;
	}

	#blue {
		position: relative;
		top: 2rpx;
		width: 0;
		height: 0;
		border-width: 0rpx 16rpx 25rpx 16rpx;
		border-style: solid;
		border-color: transparent transparent #000000;
	}

	#blue:after {
		content: "";
		position: absolute;
		top: 4rpx;
		left: -14rpx;
		border-width: 0 14rpx 23rpx 14rpx;
		border-style: solid;
		border-color: transparent transparent #ffffff;
	}
</style>
